<template>
	<div class="container bg-white">
		<h2 style="text-align: center;margin: 10px 0;font-weight: bold;">{{this.$route.query.Name}}</h2>
		<a-form :form="form" layout="vertical">

			<a-form-item v-for="(item,index) in pubdata" :label="(index+1)+'、'+item.Title" :prop="item.ID">
				<!-- 单选 -->
				<a-radio-group v-if="item.Type==1"
					v-decorator="[item.ID, { rules: [{ required: true, message: '请选择一个选项'  }] }]" name="radioGroup">
					<a-radio @change="getRadioVal(item.ID,items.ID,items.Score)" v-for="(items,index) in item.items"
						:value="items.ID">
						{{items.Name}}
					</a-radio>
				</a-radio-group>
				<!-- 多选 -->
				<a-checkbox-group  v-if="item.Type==2"  v-decorator="[item.ID, { rules: [{ required: true, message: '请至少选择一个选项'  }] }]">
					<a-checkbox @change="getCheckboxVal(item.ID,items.ID,items.Score)" v-for="(items,index) in item.items" :value="items.ID">{{ items.Name }}</a-checkbox>
				</a-checkbox-group>
				<a-input type="textarea" v-if="item.Type==3" @change="getTextVal($event,item.ID)" :auto-size="global.textareaHeight"
					v-decorator="[item.ID, { rules: [{ required: true, message: '请填写问卷！'  }] }]" />
			</a-form-item>

			<a-form-item label="评语" prop="Content">
				<a-input type="textarea" :auto-size="global.textareaHeight"
					v-decorator="['Content', { rules: [{ required: true, message: '请填写评语'  }] }]" />
			</a-form-item>

			<a-form-item class="fixed-bottom">
				<a-button type="primary" style="margin-left:400px;" @click="handleSubmit" :loading="loading">提交问卷
				</a-button>
				<!-- <a-button style="margin-left: 10px;" @click="reset">重置</a-button> -->
			</a-form-item>
		</a-form>
	</div>
</template>

<script>
	import moment from 'moment';
	import {
		UserEvaluationDoGetSubjectList,
		UserEvaluationDoAddResult
	} from '@/api/follow';
	export default {
		props: {
			currentType: String
		},
		data() {
			return {
				loading: false,
				replaceFields: {
					children: 'children',
					title: 'title',
					key: 'ID',
					value: 'ID'
				},
				formLayout: 'vertical',
				form: this.$form.createForm(this, {
					name: 'coordinated'
				}),
				pubdata: [],
				items: []

			};
		},
		created() {
			this.getOtherList()
			// this.$nextTick(() => {
			// 	this.form.setFieldsValue({
			// 		// Type: '1'
			// 	});
			// })
		},
		methods: {

			async getOtherList() {
				let data = {}
				data.evaluationID = this.$route.query.ID;
				let res = await UserEvaluationDoGetSubjectList(data)
				console.log(res);
				this.pubdata = res.data.data
			},
			getCheckboxVal(subID, itemID, Score) {
				console.log(subID)
				console.log(itemID)
				console.log(Score)
				console.log(this.items)
				const index = this.items.findIndex((item) => {
					return item.EvaluationSubjectID === subID;
				})
				const index1 = this.items.findIndex((item) => {
					return item.EvaluationSubjectItemID === itemID;
				})
				if(index1>-1){
						this.items[index1] = {
							EvaluationSubjectID: subID,
							EvaluationSubjectItemID: itemID,
							Score: Score
						}
				}else{
					this.items.push({
						EvaluationSubjectID: subID,
						EvaluationSubjectItemID: itemID,
						Score: Score
					})
				}
			},
			getTextVal(event,subID) {
				// console.log(event.target.value)
				// console.log(subID)
				const index = this.items.findIndex((item) => {
					return item.EvaluationSubjectID === subID;
				})
				if (index > -1) {
					this.items[index] = {
						EvaluationSubjectID: subID,
						Content:event.target.value
					}
				} else {
					this.items.push({
						EvaluationSubjectID: subID,
						Content:event.target.value
					})
				}
				console.log(this.items)
			},
			getRadioVal(subID, itemID, Score) {
				
				const index = this.items.findIndex((item) => {
					return item.EvaluationSubjectID === subID;
				})
				if (index > -1) {
					this.items[index] = {
						EvaluationSubjectID: subID,
						EvaluationSubjectItemID: itemID,
						Score: Score
					}
				} else {
					this.items.push({
						EvaluationSubjectID: subID,
						EvaluationSubjectItemID: itemID,
						Score: Score
					})
				}
				console.log(this.items)
			},
			getSum(array) {
				let sum = 0;
				for (var i = 0; i < array.length; i++) {
					sum += parseInt(array[i].Score||0);
				}
				return sum;
			},

			handleSubmit(e) {

				this.form.validateFields(async (err, values) => {
					if (!err) {
						let data = {};
						if(this.items.length>0){
							data.items = this.items
						}else{
							data.items = [
								{
									EvaluationSubjectID: '',
									EvaluationSubjectItemID: '',
									Score: ''
								}
							]
						}
						data.Content = values.Content;
						data.EvaluationID = this.$route.query.ID;
						let TotalScore = this.getSum(data.items)
						data.TotalScore = TotalScore||'0';
						// console.log(data);
						// return;
						let res = await UserEvaluationDoAddResult(data);
						if (res.data.code === 0) {
							this.$message.success(res.data.msg);
							this.$nextTick(() => {
								this.form.resetFields();
								this.$router.push({
									name: 'HeadMasterEvaluationUser',
								});
							})
							// this.closeFunction('1');
						} else {
							this.$message.error(res.data.msg);
						}
					}
				});
			},
			reset() {
				this.form.resetFields();
				this.importData = []
				this.icofileList = []
				this.importIf = false
				this.loading = false
			}
		}
	};
</script>

<style lang="less" scoped>
	/deep/.ant-form-item {
		margin: 20px 50px;
		// display: flex;
	}

	// /deep/.ant-form-item-label {
	// 	width: 180px;
	// 	overflow: hidden;
	// 	white-space: nowrap;
	// 	text-overflow: ellipsis;
	// 	text-align: right;
	// }

	// /deep/.ant-form-item-control-wrapper {
	// 	flex: 1;
	// }

	// .ant-form-item {
	// 	margin-bottom: 10px;
	// }

	// /deep/.ant-form {
	// 	margin-top: 50px;
	// 	padding-bottom: 50px;
	// }
</style>
